<template>
  <el-form inline>
    <el-form-item label="球鞋名称"  >
      <el-input v-model="search.itemName" placeholder="请输入搜索的球鞋名称" clearable size="large" @change="searchChange"/>
    </el-form-item>
    <el-form-item label="球鞋编码" >
      <el-input v-model="search.code" placeholder="请输入搜索的球鞋编码" clearable size="large" @change="searchChange"/>
    </el-form-item>

  </el-form>

  <el-buttton-group size="large">
    <el-button type="primary" :icon="Plus" @click="plusRow">新增数据</el-button>
    <el-button type="primary" :icon="Delete" @click="delSelect">删除全部</el-button>
  </el-buttton-group>


  <el-table
      ref="tableRef"
      :data="tableData"
      border size="large"
      show-overflow-tooltip
      highlight-current-row
      tooltip-effect="dark"
      @sort-change="onSortChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="ID" width="80" sortable fixed/>
    <el-table-column prop="itemName" label="球鞋名称" width="180"/>
    <el-table-column prop="code" label="球鞋编码" width="180"/>
    <el-table-column prop="brandId" label="球鞋品牌Id" width="180"/>
    <el-table-column prop="image" label="球鞋图片" width="200">
      <template #default="scope">
        <el-image v-if="scope.row.image" :src="scope.row.image" :preview-src-list="[scope.row.image]" style="width: 100px; height: 100px; border-radius: 5px"></el-image>
      </template>
    </el-table-column>
    <el-table-column align="center">
      <template #header #title>
        删除或修改球鞋信息
      </template>
      <template #default="scope">
        <el-button-group size="large">

          <el-button type="primary" :icon="Edit"  style="background-color: #95d475;border: 0" @click="editRow(scope)"/>
          <el-button type="primary" :icon="Delete" style="background-color:  #fab6b6; border: 0" @click="delRole(scope)"/>
        </el-button-group>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination
      :total="paginationData.total"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      :page-size="[2, 5, 10, 20, 30, 40, 50]"
      :default-page-size="paginationData.pageSize"
      @change="paginationChange"
  />


  <PlusAndEditForm :form-data="plusAndEditFormData" :title="plusAndEditTitle"/>
</template>

<script setup>
import {reactive} from "vue";
import {page} from "../../../apis/item";
import {onMounted} from "vue";
import {ref} from "vue";
import {del} from "../../../apis/item"
import {delBatch} from "../../../apis/item";
import PlusAndEditForm from "../../manager/Item/PlusAndEditForm.vue"
import {provide} from "vue";
import {watch} from "vue";
import {defineProps} from "vue";
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
    Plus
} from '@element-plus/icons-vue'
import {ElMessageBox} from "element-plus";

const tableData =ref([
])

const paginationData =  reactive({
  total:0,
  currentPage:1,
  pageSize:20
})

const paginationChange=(currentPage,pageSize)=>{
  console.log(currentPage,pageSize)
  paginationData.currentPage=currentPage
  paginationData.pageSize=pageSize
  getPage()
}
//表单搜索条件
const search =reactive({
  username:'',
  phone:'',
  nickname:''
})

//
// const filters =reactive({
//   gender:null,
//
// })


const orders=ref([])
//排序
const onSortChange=({column,order})=>{
  console.log(column,order)

  if(order){

    orders.value[0]=
        {
          column: column.property,
          isAsc: order == 'ascending'
        }
  }else {
    orders.value.length=0
  }
  getPage();


}


//搜索字段内容改变促发事件
const searchChange=()=>{
  getPage()
}

// 调用API加载后端的分页数据
const getPage = ()=>{
  page(paginationData.currentPage,paginationData.pageSize,
      {
        search,
        orders: orders.value
        // filters
      }).then((result)=>{
    console.log(result)
    tableData.value=result.data.records
    paginationData.total =result.data.total
  })

}

/**
 *
 * @param scope
 */
const delRole = (scope) =>{
  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    del(scope.row.id).then(result=>{
      getPage()
    })
  }).catch(() => {})
  // del(scope.row.id).then(result=>{
  //   getPage()
  // })
}

//获取表格对象的应用
const tableRef=ref()

const delSelect =() =>{
  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    const rows= tableRef.value.getSelectionRows()
    delBatch(rows.map(row=> row.id)).then(()=>{
      getPage()
    })
  }).catch(() => {})
  // const rows= tableRef.value.getSelectionRows()
  // delBatch(rows.map(row=> row.id)).then(()=>{
  //   getPage()
  // })
}

/**
 * 添加或者修改是否显示
 * @type {Ref<UnwrapRef<boolean>>}
 */

const plusAndEditFormVisible = ref(false)
//向子组件中传入值
provide('dialogVisible',plusAndEditFormVisible)
/**
 *
 *添加修改表单数据
 */
const plusAndEditFormData = ref({})

/**
 *添加修改表单标题
 */
const plusAndEditTitle = ref('')

const plusAndEditSuccess = ref(false)
provide('isSuccess',plusAndEditSuccess)

const editRow =(scope) =>{
  plusAndEditTitle.value='修改'
  Object.assign(plusAndEditFormData.value,scope.row)
  plusAndEditFormVisible.value= true
  plusAndEditSuccess.value=false
}

const plusRow =()=>{
  plusAndEditTitle.value='新增'
  plusAndEditFormData.value={}
  plusAndEditFormVisible.value= true
  plusAndEditSuccess.value=false
}
/**
 * 增加一行参数
 */
//生命周期，页面渲染完毕加载
onMounted(()=>{
  getPage()
})

watch(plusAndEditSuccess,()=>{
  getPage()
})

</script>

<style scoped>
.el-table{
  height: calc(100vh - 230px );
}


.el-form{
  display: flex;
}

.el-form-item{
  margin-right: 150px;
  margin-top: 10px;
}
</style>